<template>
    <div>
        角色管理
        <el-table :data="userGroup.reverse()" style="width: 100%">
            <el-table-column prop="id" label="id" />
            <el-table-column prop="name" label="名称"  />
            <el-table-column prop="ranges" label="范围" />
            <el-table-column prop="description" label="描述" width="480"  />
            <el-table-column prop="permission" label="权限" width="480"  />
            <el-table-column prop="address" label="操作">
                <template #default="scope">
                    <span  @click="editGroup(scope.row)">操作</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script setup>
// 导入获取用组的api
import {GetUserGroup} from '@/api/permission'
// 导入引用对象
import {ref} from 'vue'
// 定义用户组件数据
const userGroup = ref([]);
// 获取用户组
GetUserGroup({size:30,order:'asc'})
.then(res=>{
    if(res.data.code==0){
        // 更新用户组信息
        userGroup.value = res.data.data;
    }else{
        alert(res.data.msg)
    }
})
// 定义操作api
function editGroup(row){
    console.log(row)
}
</script>